<template>
  <div class="content">
    <div class="title">{{ $t("content.lm.title") }}</div>
    <div class="no-scrollbar scroll-x" v-show="tableData">
      <div class="content-table">
        <div class="table-header">
          <div class="cell" v-html="$t('content.lm.table.col_1')"></div>
          <div class="cell" v-html="$t('content.lm.table.col_2')"></div>
          <div class="cell" v-html="$t('content.lm.table.col_3')"></div>
          <div class="cell" v-html="$t('content.lm.table.col_4')"></div>
        </div>
        <div class="table-body">
          <div class="row" v-for="item in tableData" :key="item.id">
            <div class="col-item">{{ item.title }}</div>
            <div class="col-item">
              <ul>
                <li v-for="(item2, index) in item.title2_array" :key="index">
                  {{ item2 }}
                </li>
              </ul>
            </div>
            <div class="col-item">
              <ul>
                <li v-for="(item2, index) in item.title3_array" :key="index">
                  <svg
                    t="1725944902236"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="6490"
                    width="16"
                    height="16"
                  >
                    <path
                      d="M778.6 436.8l-47.9-3.4-279.5-327.3C429.2 78 407.9 64 387.4 64h-38.7l177 378.3-245.6 18.2-96-107.4h-74.4l98.4 150.5-98.2 165.3h74.3l95.9-107.4 245.6 18.2-177 380.3h38.7c20.5 0 41.8-14.1 63.8-42.1l279.4-327.1 47.9-3.4c11.4-1.5 21.9-2.9 31.4-3.9 9.5-1.2 21.9-3.6 37-7.5 15.2-3.7 30.2-11.7 45-23.9s22.3-25.5 22.3-39.9c0.1-42.8-45.2-67.8-135.6-75.4z"
                      p-id="6491"
                      fill="#1E90FF"
                    ></path>
                  </svg>
                  <span>{{ item2 }}</span>
                </li>
              </ul>
            </div>
            <div class="col-item">
              <IconConsult @click="applySubmit(item.id)" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-show="!tableData">
      <div class="pc-skeleton">
        <Skeleton width="30%" height="30px"></Skeleton>
        <br />
        <Skeleton :rows="10"></Skeleton>
      </div>
    </div>
    <DialogService
      type_key="lm"
      :submit_id="submit_id"
      ref="dialogLmServiceRef"
    ></DialogService>
    <DialogMobileService
      :submit_id="submit_id"
      ref="dialogMobileService"
    ></DialogMobileService>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, nextTick, onBeforeMount, ref } from "vue";
import { postLmList } from "../../../api/api";
import type { LMItem } from "../../../types/global";
import { useCacheStore, useMemberStore } from "../../../store";
import { message } from "ant-design-vue";

const $t = getCurrentInstance()!.appContext.config.globalProperties.$t;

const cacheStore = useCacheStore();
const memberStore = useMemberStore();
const tableData = ref<LMItem[]>();
const getLmList = async () => {
  if (cacheStore.lmData) {
    tableData.value = cacheStore.lmData;
    return;
  }
  let res = await postLmList();
  if (res.code == 200) {
    tableData.value = res.data;
    cacheStore.lmData = res.data;
  }
};

const dialogLmServiceRef = ref();
const dialogMobileService = ref();
const submit_id = ref();
const applySubmit = (id: number) => {
  if (!memberStore.profile) return message.warning($t("message.wait_login"));
  submit_id.value = id;
  nextTick(() => {
    if (isMobile()) {
      dialogMobileService.value.show();
    } else {
      dialogLmServiceRef.value.show();
    }
  });
};

getLmList();
</script>
<style scoped lang="less">
svg.icon-email {
  width: 30px;
  height: 30px;
}
.content {
  padding: 20px 0;
  font-size: 16px;
}
.title {
  margin-bottom: 50px;
  padding-left: 20px;
  position: relative;
  color: #19558b;
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    height: 1em;
    transform: translateY(-50%);
    width: 3px;
    background-color: #19558b;
  }
}

.content-table {
  border: 1px solid #333;
  .table-header {
    display: flex;
    background-color: rgba(0, 78, 162, 1);
    color: #fff;
    .cell {
      text-align: center;
      display: flex;
      padding: 30px 0;
      align-items: center;
      justify-content: center;
      border-right: 1px solid rgba(0, 95, 162, 1);
      &:nth-child(-n + 3) {
        flex: 1;
      }
      &:last-child {
        width: 150px;
      }
    }
  }
  .table-body {
    display: flex;
    flex-direction: column;
    .mdi {
      font-size: 20px;
    }
    .row {
      display: flex;
      &:nth-child(2n) {
        .col-item {
          border-right: 1px solid rgba(240, 240, 240, 1);
        }
      }
      &:nth-child(2n + 1) {
        background-color: #eaf4fc;
        .col-item {
          border-right: 1px solid #fff;
        }
      }
      .col-item {
        padding: 30px;
        word-break: break-all;
        white-space: wrap;
        display: flex;
        align-items: center;
        &:nth-child(-n + 3) {
          flex: 1;
        }
        &:last-child {
          width: 150px;
          justify-content: center;
        }
        &:nth-child(2) {
          ul li {
            position: relative;
            padding-left: 20px;
            &:before {
              content: "•";
              position: absolute;
              color: #007bff;
              left: 0;
            }
          }
        }
        &:nth-child(3) {
          ul li {
            display: flex;
            gap: 5px;
            svg {
              width: 22px;
              height: 22px;
              transform: translateY(2px);
            }
          }
        }
        ul {
          flex: 1;
          display: grid;
          column-gap: 10px;
          grid-template-columns: 1fr 1fr;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  svg.icon-email {
    width: 123px;
    height: 123px;
  }
  .title {
    padding-left: 50px;
    margin-bottom: 100px;
    &::before {
      width: 10px;
    }
  }
  .content {
    padding: 72px 0;
    font-size: 82px;
  }
  .content-table {
    width: 500%;
    .table-header {
      .cell {
        padding: 80px 0;
        &:last-child {
          width: 700px;
        }
      }
    }
    .table-body {
      .mdi {
        font-size: 100px;
      }
      .row {
        .col-item {
          padding: 100px;
          &:nth-child(2) {
            ul li {
              padding-left: 100px;
              &::before {
                font-size: 100px;
              }
            }
          }
          &:nth-child(3) {
            ul li {
              gap: 20px;
              svg {
                width: 64px;
                height: 64px;
                transform: translateY(24px);
              }
            }
          }
          &:last-child {
            width: 700px;
          }
        }
      }
    }
  }
}
</style>
